<template>
  <table class="table table-striped">
    <thead>
    <tr>
      <th v-for="col in columns" :key="col" :width="col.width">{{col.title}}</th>
    </tr>
    </thead>
    <tbody v-if="loadFlag">
      <tr>
        <td colspan="100">
          <div class="loading">
            <p v-if="!loadError"><i class="iconfont icon-loading"></i> Loading...</p>
            <p v-else>加载失败，请重试<a @click="refreshData()"><i class="iconfont icon-refresh"></i></a></p>
          </div>
        </td>
      </tr>
    </tbody>
    <tbody v-else-if="tableList.length>0">
      <tr v-for="row in tableList" :key="row">
        <td v-for="col in columns" :key="col" :align="col.align||'center'">
          <a class="fn-link" v-if="col.hasLink!=undefined" :href="row[col.hasLink]" target="_blank">{{row[col.field]}}</a>
          <router-link class="fn-link" v-else-if="col.to!=undefined" :to="{'name':col.to,query: { 'id': row[col.query]}}">{{row[col.field]}}</router-link>
          <span v-else>{{row[col.field]}}</span>
        </td>
      </tr>
    </tbody>
    <tbody v-else>
      <tr><td colspan="100"><div class="no-data">暂无数据！</div></td></tr>
    </tbody>
  </table>
</template>

<script>
export default {
  name: "MyTable",
  props: {
    columns: {
      type: Array,
      required: true
    },
    tableList: {
      type: Array,
      required: true
    },
    loadFlag: {
      type: Boolean,
      default: true,
      required: true
    },
    loadError: {
      type: Boolean,
      default: false,
      required: true
    }
  },
  data() {
    return {};
  },
  created: function() {},
  mounted: function() {
    this.$nextTick(function() {});
  },
  methods: {}
};
</script>
